<template>
  <div class="container">
    <div>
         
      <el-card class="box-card" style="height: 400px">
        <div slot="header" class="clearfix">
          <!-- <span>{{detail.groupName?detail.groupName:'组名称'}}</span> -->
          <el-select v-model="groupId" placeholder="选择组" @change="changeGroup()">
              <el-option
                v-for="item in options"
                :key="item.groupId"
                :label="item.groupName"
                :value="item.groupId"
              ></el-option>
          </el-select>
       
          <div class="top">
            <p>总支出：{{detail.amount}}</p>
            <p>支出平均值：{{detail.mean}}</p>
          </div>

        </div>


        <el-table
        :data="charts_datas"
        stripe
        style="width: 100%">
          <el-table-column
            prop="value"
            label="支出金额"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="avemoney"
            label="平均差"
            width="180">
          </el-table-column>
   
        </el-table>
      </el-card>  
    </div>
    <el-card>
          <div id="myChart" :style="{width: '500px', height: '300px'}"></div>
      </el-card>
  </div>

</template>

<script>
export default {
  data() {
    return {
        charts_datas:
        [
              // { name: "直接访问" ,value: 335},
              // { value: 310, name: "邮件营销" },
              // { value: 274, name: "联盟广告" },
              // { value: 235, name: "视频广告" },
              // { value: 400, name: "搜索引擎" }
            ],
      detail:{},
         //组选择下拉框
      options: [],
      groupId: "",
      value: "",
      key:'',
    };
  },
  mounted(){
      this.getGroup()
  },
  methods: {
        //获取组名
    getGroup() {
      this.requests.get("/api/charge/group").then(res => {
        this.options = res.data.data;
        this.groupId = res.data.data[0].groupId;
        this.changeGroup()
      });
    },
    //根据组id获取组信息
    changeGroup() {
      this.requests.post("/api/charge", { key: "getgroup", data: { 'GroupId':this.groupId} }).then(res => {
          if(res.data.code == 0){
              this.charts_datas = res.data.sum.memberSum
              this.detail = res.data.sum
              console.log(this.detail,this.charts_datas)
              this.drawLine();
          }

        });
    },

    // echarts
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      var weatherIcons = {
    'Sunny': './data/asset/img/weather/sunny_128.png',
    'Cloudy': './data/asset/img/weather/cloudy_128.png',
    'Showers': './data/asset/img/weather/showers_128.png'
    };

 var option = {
    title: {
        text: '成员支出金额图',
        subtext: '',
        left: 'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: 'center',
        data: ['西凉', '益州','兖州','荆州','幽州']
    },
    series : [
        {
            type: 'pie',
            radius : '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data:this.charts_datas,
            // [
                // {
                //     value:1548,
                //     name: '幽州',
                //     label: {
                //         normal: {
                //             formatter: [
                //                 '{title|{b}}{abg|}',
                //                 '  {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
                //                 '{hr|}',
                //                 '  {Sunny|}{value|202}{rate|55.3%}',
                //                 '  {Cloudy|}{value|142}{rate|38.9%}',
                //                 '  {Showers|}{value|21}{rate|5.8%}'
                //             ].join('\n'),
                //             backgroundColor: '#eee',
                //             borderColor: '#777',
                //             borderWidth: 1,
                //             borderRadius: 4,
                //             rich: {
                //                 title: {
                //                     color: '#eee',
                //                     align: 'center'
                //                 },
                //                 abg: {
                //                     backgroundColor: '#333',
                //                     width: '100%',
                //                     align: 'right',
                //                     height: 25,
                //                     borderRadius: [4, 4, 0, 0]
                //                 },
                //                 Sunny: {
                //                     height: 30,
                //                     align: 'left',
                //                     backgroundColor: {
                //                         image: weatherIcons.Sunny
                //                     }
                //                 },
                //                 Cloudy: {
                //                     height: 30,
                //                     align: 'left',
                //                     backgroundColor: {
                //                         image: weatherIcons.Cloudy
                //                     }
                //                 },
                //                 Showers: {
                //                     height: 30,
                //                     align: 'left',
                //                     backgroundColor: {
                //                         image: weatherIcons.Showers
                //                     }
                //                 },
                //                 weatherHead: {
                //                     color: '#333',
                //                     height: 24,
                //                     align: 'left'
                //                 },
                //                 hr: {
                //                     borderColor: '#777',
                //                     width: '100%',
                //                     borderWidth: 0.5,
                //                     height: 0
                //                 },
                //                 value: {
                //                     width: 20,
                //                     padding: [0, 20, 0, 30],
                //                     align: 'left'
                //                 },
                //                 valueHead: {
                //                     color: '#333',
                //                     width: 20,
                //                     padding: [0, 20, 0, 30],
                //                     align: 'center'
                //                 },
                //                 rate: {
                //                     width: 40,
                //                     align: 'right',
                //                     padding: [0, 10, 0, 0]
                //                 },
                //                 rateHead: {
                //                     color: '#333',
                //                     width: 40,
                //                     align: 'center',
                //                     padding: [0, 10, 0, 0]
                //                 }
                //             }
                //         }
                //     }
                // },
                // {value:535, name: '荆州'},
                // {value:510, name: '兖州'},
                // {value:634, name: '益州'},
                // {value:735, name: '西凉'}
            // ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
  },
};
</script>

<style lang="scss" scoped>
  .container{
    display: flex;
    justify-content:space-around;
  }
  .top{
    display: flex;
    justify-content: space-between;
  }
</style>